<template>
  <div class="page-container">
    <el-form label-width="120px" class="common-form-panel-div"
      style="padding: 0px 10px; margin-top: 20px; margin-bottom: 40px; ">


      <ex_header_spiler :title="$tt('label_token_add')"></ex_header_spiler>

      <el-row>
        <el-col style="width: 100%;">
          <el-form-item :label="$tt('label_token_validity')">

            <el-radio-group v-model="expire" style="margin-left: 10px;">
              <el-radio :label="-1">{{ $tt('label_forever') }}</el-radio>
              <el-radio :label="90">{{ $tt('label_3_month') }}</el-radio>
              <el-radio :label="365">{{ $tt('label_1_year') }}</el-radio>
              <el-radio :label="1095">{{ $tt('label_3_year') }}</el-radio>
            </el-radio-group>

          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col style="width:600px;">
          <el-form-item :label="$tt('label_remark')">
            <el-input v-model="remark"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col style="width: 100%;">
          <el-form-item label="">
            <el-button @click="createNew" :disabled="arrays.length >= 3">{{ $tt('label_add') }}</el-button>
          </el-form-item>
        </el-col>
      </el-row>

      <ex_header_spiler :title="$tt('label_token_list')"></ex_header_spiler>

      <el-row>

        <el-col style="width: 1000px;">
          <el-table :data="arrays" style="width: 100%" class="el-table-nowwarp">

            <el-table-column prop="token" label="Token" min-width="180"></el-table-column>
            <el-table-column prop="expire" :label="$tt('label_expiry_time')" width="180">
              <template slot-scope="scope">
                <span v-if="scope.row.expire == -1">{{ $tt('label_forever') }}</span>
                <span v-else>{{ $dateFormat(scope.row.expire) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="remark" :label="$tt('label_remark')" width="180"></el-table-column>
            <el-table-column prop="expire" :label="$tt('label_operate')" width="140">
              <template slot-scope="scope">

                <el-button @click="$copyToClip(scope.row.token, $tt('tip_token_has_copy_to_clip'))" type="text"
                  size="small" style="margin-right: 10px;">{{ $tt('label_copy') }}</el-button>

                <ex-button-delete deleteUrl="/ums-api/client/CustomerTokenRpc/remove.json" :deleteParam="{
                  id: scope.row.id
                }" @afterOperationDone="loadData()" :message="$tt('tip_delete_token_confirm')"
                  :label="$tt('label_delete')">
                </ex-button-delete>

              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>

      <el-row>
        <el-col style="color: #666;  padding: 20px 10px 10px 14px;">
          <i class="el-icon-info"></i> 最多只能添加 3 个 token
        </el-col>
      </el-row>

    </el-form>




  </div>
</template>

<script>
export default {
  name: "setting_signature",

  title: "label_token_manage",

  components: {},
  data() {
    return {

      expire: -1,
      remark: '',
      arrays: []

    };
  },
  created() {
    this.loadData()
  },
  destroyed() {

  },
  methods: {

    createNew() {

      this.$ajax({
        url: '/ums-api/client/CustomerTokenRpc/insert.json',
        data: {
          'expire': this.expire,
          'remark': this.remark
        },
        success: (res) => {
          this.$message({
            type: 'success',
            message: this.$tt('tip_create_success')
          })
          this.loadData();
        }
      });

    },
    loadData() {
      this.$ajax({
        url: '/ums-api/client/CustomerTokenRpc/list.json',
        data: {
          'accountType': 'CASH',
          'status': 'ENABLE'
        },
        success: (res) => {
          if (res && res.data && res.data.rows) {
            this.arrays = res.data.rows
          }
        }
      });
    }
  }

}
</script>

<style scoped></style>
